<?php if (!defined('THINK_PATH')) exit(); /*a:2:{s:62:"E:\yangjian\public/../application/index\view\index\detail.html";i:1529655688;s:45:"../application/index/view/default/header.html";i:1529654189;}*/ ?>
<!DOCTYPE HTML>
<html>

<head>
	<title>文章内容详情</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!--[if lte IE 8]><script src="/static/js/ie/html5shiv.js"></script><![endif]-->
	<link rel="stylesheet" href="/static/css/main.css" />
	<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
	<!--[if lte IE 9]><link rel="stylesheet" href="/static/css/ie9.css" /><![endif]-->
	<!--[if lte IE 8]><link rel="stylesheet" href="/static/css/ie8.css" /><![endif]-->
	<link rel="stylesheet" href="/static/css/login.css">
	<script src="/static/js/jquery.min.js"></script>
	<script src="/static/js/jquery.min.js"></script>
	<script src="/static/js/skel.min.js"></script>
	<script src="/static/js/util.js"></script>
	<!--[if lte IE 8]><script src="/static/js/ie/respond.min.js"></script><![endif]-->
	<script src="/static/js/main.js"></script>
	<script>
		$(function () { 

			$('.loginBtn').on('click',function(){
				$('.login').removeClass('none');
				$('.register').addClass('none');
			})
			$('.registerBtn').on('click',function(){
				$('.login').addClass('none');
				$('.register').removeClass('none')
			})
			$('.x').on('click',function(){
				$('.login').addClass('none');
				$('.register').addClass('none');
			})

			
		 });
	</script>
	<script>
		$(document).ready(function() {
			$('#login-submit').on('click',function(){
				$.ajax({
					type:'POST',
					url:'/index/user/login',
					dataType:'json',
					data:{'username':$('#login .username').val(),'password':$('#login .password').val()},
					success:function(data){
						alert(data.msg);
						if(!data.type) {
							window.location.reload();
						}
					}
				});
			});
	
			$('#register-submit').on('click',function(){
				$.ajax({
					type:'POST',
					url:'/index/user/register',
					dataType:'json',
					data:{'username':$('#register .username').val(),'password':$('#register .password').val(),'repassword':$('#register .repassword').val()},
					success:function(data){
						alert(data.msg);
						if(!data.type){
							window.location.reload();
						}
					}
				});
			});
		})
	
	</script>
</head>

<body id="top" >

	<!-- Wrapper -->
	<div id="wrapper">

		<!-- Header -->
		<header id="header">
			<h1>
				<a href="/">个人信息管理网站</a>
			</h1>
			<nav class="links">
				<ul>
					<li>
						<a href="/">博客</a>
					</li>
					<li>
						<a href="/index/contacts">个人通讯录</a>
					</li>
					<li>
						<a href="/admin/index/login">网站后台管理</a>
					</li>
					<?php if($userData){ ?>
					<li>
						<a href="#">欢迎<?php echo $userData['username']; ?>登陆！<span>用户ID为<?php echo $userData['uid']; ?></span></a>
					</li>
					<li>
						<a href="/index/user/loginout" id="loginout" >注销</a>
					</li>
					<?php }else{ ?>
					<li>
						<a href="#" class="loginBtn" >登陆</a>
					</li>
					<li>
						<a href="#" class="registerBtn" >注册</a>
					</li>
					<?php } ?>
				</ul>
			</nav>
			<nav class="main">
				<ul>
					<!-- <li class="search">
						<a class="fa-search" href="#search">Search</a>
						<form id="search" method="get" action="#">
							<input type="text" name="query" placeholder="搜索" />
						</form>
					</li> -->
					<li class="menu">
						<a class="fa-bars" href="#menu">Menu</a>
					</li>
				</ul>
			</nav>
		</header>

		<!-- Menu -->
		<section id="menu">

			<!-- Search -->
			<!-- <section>
				<form class="search" method="get" action="#">
					<input type="text" name="query" placeholder="搜索" />
				</form>
			</section> -->

			<!-- Links -->
			<section>
				<ul class="links">
					<li>
						<a href="/">
							<h3>个人博客</h3>
							<p>勇敢的人不是不害怕，而是怕也要向前走。</p>
						</a>
					</li>
					<li>
						<a href="/index/contacts">
							<h3>个人通讯录</h3>
							<p>请登录后再使用，建议使用1366X768或以上的分辨率浏览</p>
						</a>
					</li>
					<li>
						<a href="/admin/index/login">
							<h3>网站后台管理</h3>
							<p>请登录后再使用，建议使用1366X768或以上的分辨率浏览</p>
						</a>
					</li>
				</ul>
			</section>

			<!-- Actions -->
			<section>
				<ul class="actions vertical">
					<?php if($userData){ ?>
					<li>
						<a href="#">欢迎<?php echo $userData['username']; ?>登陆！</a>
					</li>
					<li>
						<a href="/index/user/loginout" id="loginout" >注销</a>
					</li>
					<?php }else{ ?>
					<li>
						<a href="#" class="loginBtn" >登陆</a>
					</li>
					<li>
						<a href="#" class="registerBtn" >注册</a>
					</li>
					<?php } ?>
				</ul>
			</section>

		</section>

		<div class="login none " id="login" >
			<h3>用户登录</h3>
			<form>
				<div>
					<span>用户名：</span>
					<input class="username" type="text" placeholder="请输入用户名" >
				</div>
				<div>
					<span>密码：</span>
					<input class="password" type="password" placeholder="请输入密码" >
				</div>
				<div>
					<button type="submit" id="login-submit"  >登录</button>
				</div>
			</form>
			<i class="x"></i>
		</div>
		<div class="register none" id="register" >
				<h3>用户注册</h3>
				<form>
					<div>
						<span>用户名：</span>
						<input class="username" type="text" placeholder="请输入用户名" >
					</div>
					<div>
						<span>密码：</span>
						<input class="password" type="password" placeholder="请输入密码" >
					</div>
					<div>
						<span>确认密码：</span>
						<input class="repassword" type="password" placeholder="再次输入密码" >
					</div>
					<div>
						<button type="submit" id="register-submit" >注册</button>
					</div>
				</form>
				<i class="x"></i>
			</div>

<style>
.post .TakeUp {
    position: fixed;
    top: 50%;
    right: 10px;
    z-index: 9999999;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    padding: 0;
    line-height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}
    .clearfix:after{
        content:"";
        height:0;
        line-height:0;
        display:block;
        visibility:hidden;
        clear:both;
    }
    .clearfix{
        zoom:1;
    }

    .container .row{
        margin: 0;
    }
    .panel{
        width: 100%;
        padding: 0;
    }
    .panel .input-group{
        padding: 1%;
    }
    .panel .input-group span{
        margin-bottom: 10px;
        display: inline-block;  
    }
    .panel .input-group textarea{
        width: 100%;
        margin: 0px 0px 20px;
        resize: none;
        height: 100px;
    }
    .comment-submit{
        height: 45px;
        line-height: 45px;
    }
    .nr{
        padding: 1%;
        margin-top: 30px;
    }
    .nr .panel-primary{
        width: 100%;
        margin: 0;
        margin-bottom: 20px;
        border: 1px solid #2ebaae;
        border-radius: 4px;
    }
    .nr .panel-primary .panel-heading{
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding: 0 1em;
        background: #2ebaae;
        color: #fff;
    }
    .nr .panel-primary .panel-heading h3{
        height: 38px;
        line-height: 38px;
        color: #fff;
        margin: 0;
    }
    .nr .panel-primary .panel-body{
        width: 100%;
        padding: 15px;
        background-color: white;
        line-height: 18px;
    }
    .pagination{
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .pagination li{
        list-style: none;
        padding: 0;
        margin: 0;
        float: left;
    }
    .pagination li a{
        list-style: none;
        padding: 6px 12px;
        border: 1px solid #2ebaae;
        margin-left: -1px;
    }
    .pagination li:nth-last-child(1) a{
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .pagination li:first-child a{
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        margin-right: -1px;
    }
    .active a{
        background: #2ebaae;
        color: #fff;
    }
    .active a:hover{
        color: #fff !important;
    }

</style>
<div id="main">

			<!-- Post -->

				<article class="post"  id="news" data-nid="<?php echo $newsData['nid']; ?>" >
					<header>
						<div class="title">
							<h2>
								<a href="javascript:;"><?php echo $newsData['title']; ?></a>
							</h2>
							<p>勇敢的人不是不害怕，而是怕也要向前走。</p>
						</div>
						<div class="meta">
							<time class="published" datetime="2018-06-01"><?php echo date('Y-m-d',strtotime($newsData['ntime']));?></time>
							<a href="#" class="author">
								<span class="name"><?php echo $newsData['username']; ?></span>
								<img src="/static/images/avatar.jpg" alt="" />
							</a>
						</div>
					</header>

					<div class="content1">

						<p><?php echo $newsData['detail']; ?></p>
						
					</div>

					<footer>
						<ul class="actions">
							<li>
								
								<a href="#top" class="button big TakeUp">返回<br/>顶部</a>
							</li>
						</ul>
					</footer>
				</article>









<div class="container post">
    
    <div class="row">
       
        <div class="panel clearfix">
            <div class="input-group clearfix">
                <?php if($userData){ ?>
                <span><span class="text-primary"><?php echo $userData['username']; ?>：</span></span>
                <textarea class="ctextarea  content" placeholder="请输入评论内容" ></textarea>
                <div style="display: flex;" >
                    <button style="margin: 0 auto;" class="comment-submit pull-right ">提交</button>
                </div>
                <input type="hidden" id="nid" value="<?php echo $newsData['nid']; ?>">
                <input type="hidden" id="username" value="<?php echo $userData['username']; ?>">

                <?php }else{ ?>
                <span><span class="text-primary">评论区：</span></span>
                <textarea class="ctextarea pull-left" disabled>请登录</textarea>
                <?php } ?>
            </div>
            <div class="nr">
                <div class="comment"></div>
                <nav class="row">
                    <ul class="pagination"></ul>
                </nav>
            </div>

        </div>
    </div>
</div>
</div>
</div>
</body>
<script>
    $(document).ready(function () {
        $('.comment-submit').on('click', function () {
            $.ajax({
                type: 'POST',
                url: '/index/comment/add',
                dataType: 'json',
                data: { 'content': $('.content').val(), 'username': $('#username').val(), 'nid': $('#nid').val() },
                success: function (data) {
                    alert(data.msg);
                    if (!data.type) {
                        window.location.reload();
                    }
                }
            });
        });
        var page = 1;
        var nid = $('#news').data('nid');
        function getPageComment(page, nid) {
            $.ajax({
                type: "get",
                url: '/index/comment/getPageCommentList?limit=5&page=' + page + '&nid=' + nid,
                success: function (result, textStatus) {
                    var ulBody = $('.comment');
                    chtml = '';
                    var commentList = result.commentList;
                    if (commentList.length == 0) {
                        chtml = '没有评论内容';
                    } else {
                        for (var i in commentList) {
                            chtml += ' <div class=" panel-primary row"><div class="panel-heading"><h3 class="panel-title"> ' + commentList[i].username + '<small class="pull-right">' + commentList[i].ctime + '</small></h3></div><div class="panel-body text-primary">' + commentList[i].content + '</div></div>';
                        }
                    }
                    ulBody.html(chtml);

                    var pageBody = $('.pagination');
                    var pageCount = Math.ceil(result.count / result.limit);
                    phtml = '';
                    var isHiddenExist = '';
                    for (var i = 1; i <= pageCount; i++) {
                        if (i == page) {
                            var style = 'class="active"';
                            phtml += "<li " + style + "><a href='javascript:;' data-nid='" + nid + "' data-page='" + i + "'" + " class='page_btn' >" + i + "</a></li>";
                        } else {
                            var style = '';
                            if (i < 2 || i < (page + 4) && i > (page - 3) || i > (pageCount - 1)) {
                                phtml += "<li " + style + "><a href='javascript:;' data-nid='" + nid + "' data-page='" + i + "'" + " class='page_btn' >" + i + "</a></li>";
                                isHiddenExist = 0;
                            } else {
                                if (isHiddenExist == 0) {
                                    phtml += "<li>...</li>";
                                    isHiddenExist = 1;
                                }
                            }
                        }


                    }
                    pageBody.html(phtml);

                    $('.page_btn').on('click', function () {
                        var page = $(this).data('page');
                        var nid = $(this).data('nid');
                        getPageComment(page, nid);
                    });
                }
            });
        }
        getPageComment(page, nid);

    })
</script>


</html>